<template>
  <div class="business-record">
    <a-card>
      <h2> 来往记录</h2>
      <a-divider></a-divider>
      <a-button type="primary" @click="show=true">添加记录</a-button>

      <a-timeline v-if="list&&list.length!=0" mode="alternate">
        <a-timeline-item v-for="(item,index) in list" :key="index">
          <a-popconfirm title="要删除吗?" ok-text="Yes" cancel-text="No" @confirm="confirm(item)" @cancel="cancel">
            {{item.recordContent}} {{formatTimestamp(item.meta.createdAt)}}
          </a-popconfirm>
        </a-timeline-item>
      </a-timeline>
      <a-empty v-else  description="暂无记录数据"/>

    </a-card>
    <add-record v-if="show" :show="show" @setShow='setShow'></add-record>
  </div>
</template>

<script>
import { defineComponent, ref, onMounted } from "vue";
import AddRecord from "./components/AddRecord.vue";
import { formatTimestamp } from "../../utils/formatTimestamp";
import { record } from "../../service/index";
import { message } from "ant-design-vue";
import store from "../../store/index";
import { ShowUploadListInterface } from "ant-design-vue/lib/upload/interface";
export default defineComponent({
  components: {
    AddRecord,
  },
  setup() {
    const show = ref(false);
    const setShow = (payload) => {
      show.value = payload;
      getList();
    };
    const list = ref([]);
    const getList = async () => {
      const res = await record.list(userId.value);
      if (res.data.code == 200) {
        list.value = res.data.data.list;
        console.log("list.value", list.value);
      }
    };
    const userId = ref("");
    onMounted(async () => {
      userId.value = store.state.userInfo._id;
      // console.log("userId.value", userId.value);
      getList();
    });

    /**删除弹框 */
    const confirm = async (item) => {
      console.log(item);
      //删除接口
      const res = await record.remove(item._id);
      if (res.data.code == 200) {
        message.success("删除成功");
        getList();
      }
    };

    const cancel = (e) => {
      console.log(e);
    };

    return {
      show,
      setShow,
      list,
      formatTimestamp,
      confirm,
      cancel,
    };
  },
});
</script>

<style lang="less" scoped>
</style>